import React from 'react';
import { connect } from 'react-redux'
import style from './style.module.css'
import ShopInfo from '../../../components/AddGoods/ShopInfo'
import ShopDetail from '../../../components/AddGoods/shopDetail'
import ShopFormat from '../../../components/AddGoods/ShopFormat'
import { Breadcrumb, Steps, Button } from 'antd';


const { Step } = Steps;


/* 组件 */
const GoodsInfo = (props) => {
    const [current, setCurrent] = React.useState(0);
    const {newShop}=props
  
 
    const next = (e) => {//下一步
        setCurrent(current + 1);
    };
    const handleAdd = (obj) => { //获取数据
        console.log(obj,'obj')
        

    }
    const prev = () => {  //上一步
        setCurrent(current - 1);
    };
    const handleSubmit=()=>{  //提交
        console.log(newShop,'newShop')
        props.dispatch({
            type:'add_newshop',
            payload:newShop
        })

    }
    const steps = [
        {
            title: '商品信息',
            content: <ShopInfo addInfo={handleAdd} />,
        },
        {
            title: '商品详情',
            content: <ShopDetail />,
        },
        {
            title: '规格设置',
            content: <ShopFormat />,
        },
    ];
    return (
        <div className={style.goodsInfo}>

            {/* 面包屑导航 */}
            <div className={style.head}>
                <Breadcrumb separator=">">
                    <Breadcrumb.Item>
                        <i className='iconfont icon-gengduo-2'></i>  主页
                    </Breadcrumb.Item>
                    <Breadcrumb.Item>
                        商品
                    </Breadcrumb.Item>
                    <Breadcrumb.Item>
                        商品管理
                    </Breadcrumb.Item>
                </Breadcrumb>
            </div>
            <div className={style.main}>
                <div className={style.steps}>
                    <Steps current={current} size="small" style={{marginTop:'15px'}}
                        labelPlacement='vertical'
                        >
                        {steps.map(item => (
                            <Step key={item.title} title={item.title} />
                        ))}
                    </Steps>
                    <div className={style.stepsContent}>
                        {steps[current].content}
                    </div>

                    {/* 上/下一步 */}
                    <div className="steps-action">
                        {current > 0 && (
                            <Button style={{ margin: '0 8px' }} onClick={() => prev()}>
                                上一步
                            </Button>
                        )}
                        {current < steps.length - 1 && (
                            <Button type="primary" onClick={() => next()}
                            >
                                下一步
                            </Button>
                        )}


                        {current === steps.length - 1 && (
                            <Button type="primary" onClick={ handleSubmit}>
                                提交
                             </Button>
                        )}
                    </div>
                </div>
            </div>

        </div>
    );
}

export default connect((state) => {
    return {
        newShop:state.newShop
    }
})(GoodsInfo);
